<template>
	<div>
		<h2 style="margin-bottom: 10px">上下界法（汽车与自行车追尾碰撞）</h2>
		<div class="title-content">
			<el-form-item label="汽车质量" style="margin-right: 20px" prop="m1">
				<el-form-item prop="m1">
					<el-input class="ipt" v-model="form.m1" />
				</el-form-item>
			</el-form-item>
			<el-form-item label="自行车质量" style="margin-right: 20px" prop="m2">
				<el-form-item prop="m2">
					<el-input class="ipt" v-model="form.m2" />
				</el-form-item>
			</el-form-item>
			<el-form-item label="骑车人质量" style="margin-right: 20px" prop="mp">
				<el-form-item prop="mp">
					<el-input class="ipt" v-model="form.mp" />
				</el-form-item>
			</el-form-item>
		</div>
		<h4 style="margin-bottom: 10px">不确定输入参数范围</h4>
		<div class="title">
			<div>均值</div>
			<div>最大离差</div>
			<div>包含因子</div>
		</div>
		<el-form
			:model="form"
			:rules="rules"
			ref="formRef"
			label-width="220px"
			label-position="left"
			:inline="true"
		>
			<el-form-item label="汽车滑动附着系数 (o)" prop="o">
				<el-form-item prop="o">
					<el-input class="ipt" v-model="form.o" />
				</el-form-item>
				<el-form-item prop="o1">
					<el-input class="ipt" v-model="form.o1" />
				</el-form-item>
				<el-form-item prop="o2">
					<el-input class="ipt" v-model="form.o2" />
				</el-form-item>
			</el-form-item>
			<el-form-item label="碰撞后汽车的滑移距离 (s)" prop="s">
				<el-form-item prop="s">
					<el-input class="ipt" v-model="form.s" />
				</el-form-item>
				<el-form-item prop="s1">
					<el-input class="ipt" v-model="form.s1" />
				</el-form-item>
				<el-form-item prop="s2">
					<el-input class="ipt" v-model="form.s2" />
				</el-form-item>
			</el-form-item>
		</el-form>
		<h4 style="margin-bottom: 10px">输出结果</h4>

		<div class="footer">
			<div>
				<el-form-item label="速度下界 (km/h)">
					<el-input class="ipt" v-model="result" type="number" />
				</el-form-item>
				<el-form-item label="速度上界 (km/h)">
					<el-input class="ipt" v-model="result1" type="number" />
				</el-form-item>
			</div>
			<div style="margin-left: 220px">
				<el-button type="primary" @click="calculateSpeed">不确定分析</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const formRef = ref(null);
const form = ref({
	g: 9.8,
	m1: null,
	m2: null,
	mp: null,
	o: null,
	k: 1,
	s: null,
	o1: null,
	s1: null
});

const result = ref(null);
const result1 = ref(null);

const rules = {
	g: [{ required: true, message: "请输入重力加速度", trigger: "blur" }],
	m1: [{ required: true, message: "请输入汽车质量", trigger: "blur" }],
	m2: [{ required: true, message: "请输入自行车质量", trigger: "blur" }],
	mp: [{ required: true, message: "请输入骑车人质量", trigger: "blur" }],
	o: [{ required: true, message: "请输入汽车滑动附着系数", trigger: "blur" }],
	k: [{ required: true, message: "请输入汽车附着系数修正值", trigger: "blur" }],
	s: [{ required: true, message: "请输入碰撞后汽车的滑移距离", trigger: "blur" }],
	o1: [{ required: true, message: "请输入汽车滑动附着系数", trigger: "blur" }],
	s1: [{ required: true, message: "请输入碰撞后汽车的滑移距离", trigger: "blur" }]
};

const calculateSpeed = () => {
	formRef.value.validate((valid) => {
		if (valid) {
			const { g, m1, m2, mp, o, k, s, o1, s1 } = form.value;
			const numerator = (m2 + m1 + mp) / m1;
			const numerator1 = (m2 + m1 + mp) / m1;
			const v = numerator * Math.sqrt(2 * g * o * k * s) * 3.6;
			const v1 = numerator1 * Math.sqrt(2 * g * o1 * k * s1) * 3.6;
			result.value = v.toFixed(2);
			result1.value = v1.toFixed(2);
		}
	});
};
</script>
<style scoped>
.ipt {
	width: 120px;
}
.title {
	display: flex;
	align-items: center;
	padding-left: 260px;
	margin-bottom: 20px;
	div {
		margin-right: 106px;
	}
}
.footer {
	display: flex;
	align-items: center;
}
.title-content {
	display: flex;
	align-items: center;
}
</style>
